<template>
  <el-card class="cards">
    <el-row>
      <el-col>
        <el-row type="flex" justify="end">
          <el-button icon="el-icon-edit" type="success" @click="toEntering">新增试题</el-button>
        </el-row>
        <el-row class="rows">
          <el-form ref="form" :model="form" label-width="80px">
            <el-col :span="6">
              <el-form-item label="学科">
                  <el-select v-model="form.subjectID" placeholder="请选择" style="width: 100%" @change="subjectChange($event)">
                      <el-option :label="item.subjectName" :value="item.id" v-for="(item, index) in subjectobj" :key="index"></el-option>
                  </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select v-model="form.catalogID" placeholder="请选择" style="width: 100%">
                  <el-option :label="item.label" :value="index" v-for="(item, index) in secondLevel" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select v-model="form.region" placeholder="请选择" style="width: 100%">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字" style="width: 100%">
                <el-input v-model="form.keyword"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-row>
          <el-form ref="form" :model="form" label-width="80px">
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select v-model="form.region" placeholder="请选择" style="width: 100%">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select v-model="form.region" placeholder="请选择" style="width: 100%">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select v-model="form.region" placeholder="请选择" style="width: 100%">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select v-model="form.region" placeholder="请选择" style="width: 100%">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-row>
          <el-form ref="form" :model="form" label-width="80px">
            <el-col :span="6">
              <el-form-item label="题目备注" style="width: 100%">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称" style="width: 100%">
                <el-input v-model="form.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市">
                <el-select v-model="form.province" placeholder="请选择" style="width: 50%" @change="firscityChange($event)">
                  <el-option :label="item.city" :value="item.area" v-for="(item, index) in city" :key="index"></el-option>
                </el-select>
                <el-select v-model="form.city" placeholder="请选择" style="width: 50%">
                  <el-option :label="item" :value="item" v-for="(item, index) in citys" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" class="cols">
              <el-row type="flex" justify="end">
                <el-button @click="delData">清除</el-button>
                <el-button type="primary" @click="keywordsearch">搜索</el-button>
              </el-row>
            </el-col>
          </el-form>
        </el-row>
      </el-col>
    </el-row>
    <el-alert :title='totals' type="info" :closable='false'/>
    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" class="tables">
      <el-table-column prop="number" label="试题编号" width="250"></el-table-column>
      <el-table-column prop="subject" label="学科" width="130px"></el-table-column>
      <el-table-column prop="catalog" label="目录" width="130px"></el-table-column>
      <el-table-column prop="questionType" label="题型" width="130px">
        <template slot-scope="{ row }">
          <div>{{row.questionType == 1 ? '单选' : '多选'}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="题干" width="270px">
        <template slot-scope="{ row }">
          <div v-html="row.question"></div>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="230px">
        <template slot-scope="{ row }">
           {{ parseTime(new Date(row.addDate)) || row.addDate }}
        </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="130px">
        <template slot-scope="{ row }">
          <div>{{row.difficulty == 1 ? '简单' : '困难'}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="160px"></el-table-column>
      <el-table-column prop="date" label="操作" width="230px">
        <template slot-scope="{ row }">
          <el-button icon="el-icon-view" circle @click="showDialog(row.id)"></el-button>
          <el-button type="primary" icon="el-icon-edit" circle @click="showDataChange(row)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="showDataDel(row.id)"></el-button>
          <el-button type="info" icon="el-icon-check" circle @click="showDataAdd(row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹出框 -->
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="60%">
      <el-row>
        <el-col :span="6"><span>【题型】: {{showDialogData.questionType == 1 ? '单选' : '多选题'}}</span></el-col>
        <el-col :span="6"><span>【编号】：{{showDialogData.id}}</span></el-col>
        <el-col :span="6"><span>【难度】：{{showDialogData.difficulty == 1 ? '简单' : '困难'}}</span></el-col>
        <el-col :span="6"><span>【标签】：</span></el-col>
      </el-row>
      <el-row class="rowd">
        <el-col :span="6"><span>【学科】: {{showDialogData.subjectName}}</span></el-col>
        <el-col :span="6"><span>【目录】：{{showDialogData.directoryName}}</span></el-col>
        <el-col :span="6"><span>【方向】：{{showDialogData.direction}}</span></el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row class="rowd">【题干】：</el-row>
      <el-row class="rows"><div v-html="showDialogData.question"></div></el-row>
      <el-row class="rowd">{{showDialogData.questionType == 1 ? '单选' : '多选题'}}选项：（以下选中的选项为正确答案）</el-row>
      <el-row class="rowd">
        <el-radio v-model="item.title" label="isRight" v-for="(item, index) in showDialogData.options" :key="index">{{item.code}}</el-radio>
      </el-row>
      <el-divider></el-divider>
      <el-row>【参考答案】：{{showDialogData.videoURL}}</el-row>
      <!-- <el-row>【参考答案】：<el-button type="danger" to="showDialogData.videoURL">视频链接</el-button></el-row> -->
      <el-divider></el-divider>
      <el-row>
        <div>【答案解析】：<span v-html="showDialogData.answer"></span></div>
      </el-row>
      <el-divider></el-divider>
      <el-row>【题目备注】：<span v-html="showDialogData.answer"></span></el-row>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </el-row>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30]"
      :page-size="page.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>
  </el-card>
</template>

<script>
import { questionData, showData, showDataDel, showDataAdd, getsubject, secondLevel } from '@/api/user'
import { parseTime } from '@/utils'
import { datas } from '@/api/citys'
export default {
  data() {
    return {
      parseTime,
      form: {
        subjectID: '',
        catalogID: '',
        province: '',
        city: '',
        keyword: ''
      },
      tableData: [],
      page: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      // 控制弹出框
      dialogVisible: false,
      showDialogData: {},
      totals: '',
      choiceState: 1,
      // 获取学科列表参数
      pages: {
        page: 1,
        pagesize: 10,
      },
      subjectobj: [],
      secondLevel: [],
      city: [],
      citys: []
    }
  },
  created() {
    this.questionData()
    this.getsubject()
    this.city = datas
    // console.log(this.city);
  },
  methods: {
    // 获取学科列表
    async getsubject() {
      const { data } = await getsubject(this.pages)
      this.subjectobj = data.items
      // console.log(this.subjectobj);
    },
    // 获取基础题库列表
    async questionData() {
      const { data } = await questionData(this.page)
      this.tableData = data.items
      this.page.total = this.tableData.length
      this.totals = `共有${'' + this.page.total}条数据`
      // console.log(data.items);
    },
    // 弹出层详情
    async showDialog(id) {
      this.dialogVisible = true
      const { data } = await showData(id)
      this.showDialogData = data
      console.log(data);
    },
    handleSizeChange(newSize) {
      this.page.pagesize = newSize
      this.questionData()
    },
    handleCurrentChange(newPage) {
      this.page.page = newPage
      this.questionData()
    },
    // 删除试题
    showDataDel(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await showDataDel(id)
        this.questionData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    // 新增试题
    toEntering() {
      this.$router.push({path: '/entering'})
    },
    // 加入精选
    showDataAdd(id) {
      this.$confirm('是否加入精选', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await showDataAdd(id, this.choiceState)
        this.questionData()
        this.$message({
          type: 'success',
          message: '加入精选成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消加入精选'
        });          
      });
    },
    // 修改试题
    showDataChange(row) {
      const rows = row
      this.$router.push({path: '/entering', query:  rows })
      // showDataChange(row)
    },
    async subjectChange(event) {
      const { data } = await secondLevel(event)
      this.secondLevel = data
    },
    firscityChange(event) {
      this.citys = event
    },
    async keywordsearch() {
      const { data } = await questionData(this.form)
      this.tableData = data.items
    },
    delData() {
      this.form = {
        subjectID: '',
        catalogID: '',
        province: '',
        city: '',
        keyword: ''
      },
      this.questionData()
    }
  }
};
</script>

<style lang="scss" scoped>
.rows {
  margin-top: 10px;
}
.rowd {
  margin-top: 20px;
}
.tables {
  margin-top: 10px;
}
</style>
